<template>
  <div :style="{ width: size, borderRadius: borderRadius }" v-viewer style="overflow:hidden;cursor: pointer">
    <img v-for="(image, index) in currentImage" :key="index" :src="image" style="width: 100%" :style="{ display: index < 1 ? 'block' : 'none' }"/>
  </div>
</template>
<script>
export default {
  name: 'ImageViewer',
  props: {
    imageList: {
      type: Array,
      default: () => []
    },
    src: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '100%'
    },
    borderRadius: {
      type: String,
      default: '0'
    }
  },
  computed: {
    currentImage () {
      return (this.src && (this.imageList.length < 1)) ? [this.src] : this.imageList
    }
  },
  data () {
    return {
    }
  }
}
</script>
<style scoped lang="less">

</style>